<template>
	<view class="wpprs">
		<view class="roi">
			<view>处理结果</view>
			<view @click="flag = true">
				<image src="../../static/images/iconSolved.png" v-if="flag"></image>
				<image src="../../static/images/iconUnsolve.png" v-if="!flag"></image>
				{{ '&nbsp;&nbsp;已解决' }}
			</view>
			<view @click="flag = false">
				<image src="../../static/images/iconSolved.png" v-if="!flag"></image>
				<image src="../../static/images/iconUnsolve.png" v-if="flag"></image>
				{{ '&nbsp;&nbsp;未解决' }}
			</view>
		</view>
		<view class="dy">
			<view class="yz" v-if="typeList.indexOf(type) == -1">
				<view class="l">是否有验证</view>
				<view class="r"><uni-data-select v-model="isyanzhen" :localdata="range"></uni-data-select></view>
			</view>
			<view class="adrssbox">
				<view class="title">定位</view>
				<view class="iptbox">
					<image src="../../static/images/iconAddr.png"></image>
					{{ address }}
				</view>
				<view><image src="../../static/images/iconRefesh.png" @click="getAddress"></image></view>
			</view>
		</view>
		<view class="shuoming">
			<view>处理说明</view>
			<textarea type="text" v-model="explain" placeholder="请输入处理说明"></textarea>
			<view>
				<image class="setimgs" src="../../static/images/iconPickerBg.png" @click="getImg"></image>
				<view class="setmps" v-for="(item, idx) in imgList" :key="idx">
					<image class="icons" src="../../static/images/iconContactsDelete.png" @click="imgList.splice(idx, 1)"></image>
					<image class="imglist" :src="item"></image>
				</view>
			</view>
		</view>
		<view class="submit" @click="phoneReport">确定</view>
	</view>
</template>

<script>
import QQMapWX from '../../utlis/qqmap-wx-jssdk.min.js';
import { guid } from '../../utlis/other.js';
import { workOrderReportworkReport, aliyunOssConf } from '../../api/order.js';
export default {
	name: 'handle',
	data() {
		return {
			flag: true,
			imgList: [],
			roderId: '',
			address: '',
			latitude: '',
			longitude: '',
			isyanzhen: '',
			explain: '',
			productid: '',
			type: null,
			range: [
				{
					value: '1',
					text: '硬件IQ/QQ'
				},
				{
					value: '2',
					text: '硬/软件IQ/QQ'
				},
				{
					value: '3',
					text: '否'
				}
			],
			typeList: [1, 3, 5, 6, 7]
		};
	},
	onLoad(e) {
		this.roderId = e.id;
		this.type = e.type;
		this.productid = e.productid;
		this.getAddress();
	},
	methods: {
		phoneReport() {
			if (this.address == '') {
				uni.showToast({
					title: '地址不能为空',
					duration: 2000
				});
				return;
			}
			if (this.explain == '') {
				uni.showToast({
					title: '处理说明不能为空',
					duration: 2000
				});
				return;
			}
			if (this.imgList.length == 0) {
				uni.showToast({
					title: '图片不能为空',
					duration: 2000
				});
				return;
			}
			workOrderReportworkReport({
				workOrderId: this.roderId,
				result: this.flag ? 1 : 2,
				location: this.address,
				explain: this.explain,
				images: this.imgList.join(','),
				productDTOS: [{ verify: this.isyanzhen, id: this.productid }]
			}).then((data) => {
				uni.showToast({
					title: '提交成功',
					duration: 2000
				});
				uni.navigateBack({ delta: 1 });
			});
		},
		getImg() {
			let _this = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success(res) {
					aliyunOssConf().then((data) => {
						console.log('aliyunOssConf：', res);
						let content = data.content;
						let guidkey = guid();
						uni.uploadFile({
							url: content.host,
							filePath: res.tempFilePaths[0],
							fileType: 'image',
							name: 'file',
							formData: {
								key: `${content.dir}/${guidkey}.${res.tempFilePaths[0].substr(res.tempFilePaths[0].lastIndexOf('.') + 1)}`,
								success_action_status: '200',
								OSSAccessKeyId: content.accessKeyId, // 后台的临时签名ID
								// accessKeySecret: content.accessKeySecret, // 后台的临时签名密钥
								// region: 'oss-cn-shanghai', // 上传后的域名
								// stsToken: content.policy,
								policy: content.policy,
								// bucket: content.bucket,// OSS仓库名
								signature: content.signature
							},
							success: (resa) => {
								console.info(res.statusCode);
								if (resa.statusCode == 200) {
									uni.showToast({
										title: '上传成功',
										icon: 'success',
										duration: 1000
									});
									_this.imgList = _this.imgList.concat(
										`${content.host}/${content.dir}/${guidkey}.${res.tempFilePaths[0].substr(res.tempFilePaths[0].lastIndexOf('.') + 1)}`
									);
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'error',
										duration: 1000
									});
								}
							},
							fail: (res) => {
								console.info(res);
							}
						});
					});
					return;
					_this.imgList = [..._this.imgList, ...res.tempFilePaths];
					console.log(JSON.stringify(res.tempFilePaths));
				}
			});
		},
		getAddress() {
			//定位
			let _this = this;

			wx.getLocation({
				type: 'wgs84',
				altitude: true,
				isHighAccuracy: true,
				success(res) {
					console.log(res);
					let qqmapsdk = new QQMapWX({
						key: '26CBZ-5X56U-D4DVT-B4KVL-6T4B5-LTBGW'
					});
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						sig: 'w276kzqX9w5s73q9DiUY2sZLVAuPev',
						success(re) {
							// console.log(re.result.address,);//这里边就是你需要的定位数据了
							_this.address = re.result.address;
						},
						fail(re) {
							console.log(re, '失败信息');
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.wpprs {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-image: url('https://junminyiqi.oss-cn-shanghai.aliyuncs.com/flies/d29eccf2-f7be-dbc8-4853-e3b19055825b.png');
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 30upx;
	box-sizing: border-box;
	background-color: #f1f1f1;
	.submit {
		margin-top: 30upx;
		padding: 26upx;
		background: red;
		border-radius: 60upx;
		text-align: center;
		color: #fff;
	}
	.shuoming {
		padding: 20upx;
		background: #fff;
		border-radius: 10upx;
		margin-top: 30upx;
		textarea {
			width: 100%;
			height: 150upx;
			margin-top: 20upx;
		}
		.setimgs,
		.setmps {
			display: inline-block;
			margin-top: 20upx;
			margin-right: 20upx;
			width: 170upx;
			height: 170upx;
		}
		.setmps {
			position: relative;
			.icons {
				position: absolute;
				right: 0;
				top: 0;
				width: 40upx;
				height: 40upx;
			}
			.imglist {
				width: 170upx;
				height: 170upx;
			}
		}
	}
	.roi {
		padding: 20upx 0;
		text-align: center;
		background: #fff;
		border-radius: 10upx;
		& > view {
			width: 33%;
			display: inline-block;
		}
		image {
			width: 20upx;
			height: 20upx;
			display: inline-block;
		}
	}
	.dy {
		margin-top: 30upx;
		background: #fff;
		border-radius: 10upx;
		padding: 20upx;
		.yz {
			display: flex;
			.l {
				width: 320upx;
			}
			.r {
				width: 100%;
				text-align: right;
				/deep/.uni-stat__select {
					transform: translateY(-10upx);
				}
				/deep/.uni-select {
					border: none;
				}
				/deep/.uni-select__input-placeholder {
					color: #000;
					font-size: 32upx;
				}
			}
		}
		.adrssbox {
			margin-top: 20upx;
			display: flex;
			.title {
				width: 100upx;
			}
			.iptbox {
				width: 100%;
			}
			image {
				width: 30upx;
				height: 30upx;
			}
		}
	}
}
</style>
